<template>
  <div class="home">
    <LoadModel class="top" />
    <Tools class="bottom" />
    <Hierarchy class="left" />
    <Web3D />
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Web3D from "@/components/Web3D.vue"; // @ is an alias to /src
import Tools from "@/components/Tools.vue";
import LoadModel from "@/components/LoadModel.vue";
import Hierarchy from "@/components/Hierarchy.vue";

export default Vue.extend({
  name: "Home",
  components: {
    Web3D,
    Tools,
    LoadModel,
    Hierarchy,
  },
});
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  .bottom,
  .top,
  .left {
    position: absolute;
  }
  .bottom,
  .top {
    display: flex;
    width: 100%;
    height: 40px;
    justify-content: center;
    align-items: center;
  }
  .bottom {
    bottom: 40px;
  }
  .left {
    left: 0px;
    width: 250px;
    height: 100%;
    overflow: auto;
  }
}
</style>
